/**
 * Created by lixinkun on 2017/7/8.
 */
import React, {Component } from 'react';
import {
    Text,
    View,
    TouchableHighlight,
    ActivityIndicator,
    ListView,
    StyleSheet,
} from 'react-native';

import NavigationBar from '../../components/NavigationBar';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as Actions from '../../actions/requestPlaceData';
import px2dp from '../../utils/px2dp';
import CityList from './CityList';

class WeatherFragment extends Component {

    constructor(props){
        super(props);
        this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2});
    }

    render(){
        const spinner = this.props.loading ? (
            <ActivityIndicator
                style = {styles.loading}
                hidden = 'true'
                size = 'large'/>
        ) : (
            <View/>
        );
        return (
            <View style={[styles.container, {backgroundColor : this.props.pageBackgroundColor}]}>
                <NavigationBar
                    title='中国'

                />
                {spinner}
                <ListView
                    enableEmptySections={true}
                    dataSource={this.ds.cloneWithRows(this.props.dataSource)}
                    renderRow={this._renderRow.bind(this)}
                />
            </View>
        );
    }

    _renderRow(rowData, sectionID, rowID) {
        return(
            <TouchableHighlight
                onPress={()=> this._rowPressed(rowData, sectionID, rowID)}
                underlayColor='#dddddd'>
                <View>
                    <View style={styles.rowContainer}>
                        <View style={styles.textContainer}>
                            <Text style={[styles.id, {color: this.props.mainThemeColor}]}>
                                {rowData.id}
                            </Text>
                            <Text style={styles.title}>
                                {rowData.name}
                            </Text>
                        </View>
                    </View>
                    <View style={styles.separator}/>
                </View>
            </TouchableHighlight>
        );
    }

    _rowPressed(rowData, sectionID, rowID) {
        this.props.navigator.push({
            name: CityList + '',
            component: CityList,
            args: {
                rowData: rowData,
                sectionID: sectionID,
                rowID: rowID,
                provinceName: rowData.name,
                provinceId: rowData.id,
                url: this.URL,
            },

        })


    }



    componentDidMount() {
        this.props.actions.fetchDataFromNet();
    }


}

const styles = StyleSheet.create({
    textContainer: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
    },
    container: {
        flex: 1,
    },
    loading: {
        flex: 10,

    },
    separator: {
        height: 1,
        backgroundColor: "#dddddd",
    },
    id: {
        paddingLeft: px2dp(8),
        fontSize: 25,
        fontWeight: 'bold',
    },
    title: {
        fontSize: 20,
        marginLeft: px2dp(20),
        alignItems: 'center',
    },
    rowContainer: {
        flexDirection: 'row',
        padding: 10,
    },

});

const mapStateToProps = (state) => {
    return {
        loading: state.placeDataState.loading,
        dataSource: state.placeDataState.dataSource,
        error: state.placeDataState.error,
        mainThemeColor: state.settingState.colorScheme.mainThemeColor,
        pageBackgroundColor: state.settingState.colorScheme.pageBackgroundColor,
    };
}

const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(Actions, dispatch),
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(WeatherFragment);

